<template>
	<scroll-view class="container" scroll-y scroll-top="10" @scrolltolower="loadDown" @scrolltoupper="loadUp">
		<skeleton :skeleton="{name:'studyDetails'}" :showSkeleton="showSkeleton">
			<block slot="content">
				<noData :showErrorTip="noData">
					<view class="panel" slot="content">
						<view class="panel-body" v-for="(item, index) in metaData" :key="index">
							<view class="panel-body-item">
								<view class="item-info">
									<view class="item-info__h3">{{ item.title }}</view>
									<view class="item-info__h6">共{{item.sujectNum}}题，总时间{{item.examMin}}分钟</view>
								</view>
								<view class="item-timeBox">
									<text class="item-time" :class="[item.status=='2'?'gray-btn':'']" @click="linkTopic(index,item.status,item.examId,item.resultId)">{{item.status=='0'?'继续答题':'开始考试'}}</text>
									<text class="item-text">已刷题{{item.studyCount }}次</text>
								</view>
							</view>
						</view>
					</view>
					<view class="loading" v-if="textShow">没有更多了</view>
				</noData>
			</block>
		</skeleton>
	</scroll-view>
</template>

<script>
	import {
		isEmpty
	} from '@/utils/index';
	import ExamService from "@/services/exam/exam.js";
	const service = new ExamService();
	export default {
		name: "true_topic_data",
		props: {
			ascription: {
				type: String
			},
			code: {
				type: Number,
				default: 0
			},
			type: {
				type: Number
			},
			homeCode: {
				type: Number
			}
		},
		data() {
			return {
				examType: 4,
				textShow: false,
				pageNum: 1,
				pageSize: 20,
				metaData: [],
				showSkeleton: true,
				noData: false,
				curIndex: -1
			};
		},
		watch: {
			homeCode(newVal) {
				if (this.code == this.homeCode && this.metaData.length == 0) {
					this.loadData(1);
					console.log("watch")
				}
			}
		},
		mounted() {
			if (this.code == this.homeCode) {
				this.loadData(1);
				console.log("mounted")
			}
			uni.$on('examFinish', (payload) => {
				console.log('examFinish',this.code,payload);
				if(this.code == this.homeCode){
					this.updateItemStatus(payload);
				}
			})
		},
		destroyed() {
			console.log('destroyed');
			uni.$off('examFinish');
		},
		methods: {
			loadData(pageNum) {
				let param = {
					pageNum: pageNum,
					pageSize: this.pageSize,
					homeType: this.ascription,
					resultType: this.examType,
					examType: 1
				}
				if (this.ascription == 3) {
					param.type = this.code
				}
				service
					.pastExamPaper(param)
					.then(res => {
						if (res.success) {
							if (this.pageNum > 1) {
								this.textShow = res.result.list.length < this.pageSize;
								const listData = this.handleData(res.result.list);
								this.metaData = this.metaData.concat(listData);
							} else {
								this.textShow = false;
								this.metaData = this.handleData(res.result.list);
								this.noData = res.result.list.length == 0;
							}
							this.pageNum = res.result.pageNum;
						}
					})
					.then(() => {
						this.showSkeleton = false; //页面请求完成，取消骨架屏展示
					});
			},
			/**
			 * 转换数据
			 * status:0：继续答题
			 *        1：开始考试
			 *        2：灰色开始考试
			 */
			handleData(listData) {
				if (isEmpty(listData)) {
					return [];
				}
				listData.forEach((item, index) => {
					this.handleStatus(item);
				});
				return listData;
			},
			handleStatus(item) {
				if (!isEmpty(item)) {
					if (item.limitFlag) { //限制考试次数
						if (item.isComplete == '0') { //未完成
							item.status = '0';
						} else { //已完成
							if (item.examLimit > item.studyCount) { //未达到先考次数
								item.status = '1';
							} else { //达到限考次数
								item.status = '2';
							}
						}
					} else { //不限制考试次数
						if (item.isComplete == '0') {
							item.status = '0';
						} else {
							item.status = '1';
						}
					}
				}
			},
			//考试完成后通知，刷新单个条目
			updateItemStatus(payload) {
				//从历史列表点击做题，根据examId刷新真题列表 -_-
				console.log('hhaha');
				if (!isEmpty(this.metaData)) {
					let item;
					if (this.curIndex < 0) {
						item = this.metaData.find((optionItem, index) => optionItem.examId==payload.examId);
					} else if(this.metaData.length > this.curIndex){
						item = this.metaData[this.curIndex];
					}
					console.log('refresh',item);
					if (!isEmpty(item)) {
						if ('1' == payload.isFinished) { //未完成，中途退出
							item.isComplete = '0';
							item.resultId = payload.recordId;
						} else {
							item.isComplete = '1';
							item.resultId = '';
							item.studyCount = parseInt(item.studyCount) + 1;
						}
						this.handleStatus(item);
					}
				}
				this.curIndex = -1;
				
			},

			loadDown() {
				const pageNum = this.pageNum + 1;
				this.loadData(pageNum);
			},
			loadUp() {
				this.loadData(1);
			},
			linkTopic(index, status, examId, recordId) {
				if (status == '2') {
					return true;
				}
				this.curIndex = index;
				recordId = recordId == undefined ? "" : recordId
				uni.navigateTo({
					url: "/pages/exam/examsub?examType=" + this.examType + "&examId=" + examId + "&recordId=" + recordId
				});
			}
		}
	};
</script>

<style lang="scss">
	.container {
		
	}

	.error{
		position: relative;
	}
	.panel {
		&-body {
			width: 100%;
			background: #fff;
			border-radius: 8upx;
			padding: 10upx 20upx;
			border-bottom: 1upx dashed #dddddd;

			&-item {
				height: 108upx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				text-align: left;
			}

			&-body:last-child {
				border: 0;
			}
		}
	}

	.item-info {
		flex: 1;

		&__h3 {
			font-size: 28upx;
			color: #333;
		}

		&__h6 {
			font-size: 24upx;
			color: #999999;
			margin-top: 10upx;
		}
	}

	.item-timeBox {
		text-align: center;
	}

	.item-time {
		width: 140upx;
		height: 50upx;
		background-color: #377cfd;
		border-radius: 6upx;
		color: #fff;
		text-align: center;
		line-height: 50upx;
		font-size: 20upx;
		display: block;
	}

	.item-text {
		font-size: 20upx;
		display: block;
		color: #999999;
		margin-top: 5px;
	}

	.loading {
		text-align: center;
		font-size: 28upx;
		padding: 20upx 0;
		color: #999;
	}

	.gray-btn {
		background-color: #dedede;
		color: #fff;
	}
</style>
